<template>
  <view class="category-container">
    <view class="category-tab-title">
      <view class="title-inner">
        <uni-segmented-control
          :current="current"
          :values="items.map(v=>v.title)"
          @clickItem="onClickItem"
          style-type="text"
          active-color="#d4237a"
        ></uni-segmented-control>
      </view>
      <view class="iconfont iconsearch"></view>
    </view>
    <scroll-view scroll-y  enable-flex class="category-tab-content" @scrolltolower='handlescrolltolower'>
      <view class="cate-item" v-for="item in vertical" :key="item.id">
        <image :src="item.thumb" mode="widthFix">
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import { getImgCate } from "../../network/imgCate.js";
export default {
  components: {
    uniSegmentedControl
  },
  onLoad({ id }) {
    this.id = id;
    this.__getImgCate();
  },
  data() {
    return {
      items: [
        { title: "最新", order: "new" },
        { title: "热门", order: "hot" }
      ],
      params: {
        limit: 30,
        skip: 0,
        order: "new"
      },
      current: 0,
      id: 0,
      vertical: []
    };
  },
  methods: {
    // ==================== 发送请求 ===========================
    async __getImgCate() {
      const res = await getImgCate({
        url: `/v1/vertical/category/${this.id}/vertical`,
        data: this.params
      });
      
      
      this.vertical = [...this.vertical,...res.res.vertical]
    },
    // ==================== 事件监听 ============================
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }else {
        return 
      }

      this.params.order = this.items[e.currentIndex].order;
      this.params.skip = 0;
      this.vertical = [];
      this.__getImgCate();
    },
    handlescrolltolower() {
      this.__getImgCate()
    }
  }
};
</script>

<style scoped lang='scss'>
.category-container {
  .category-tab-title {
    position: relative;
    .title-inner {
      width: 60%;
      margin: 0 auto;
    }
    .iconsearch {
      position: absolute;
      top: 50%;
      right: 30rpx;
      transform: translateY(-50%);
    }
  }

  .category-tab-content {
    height: calc( 100vh - 36px );
    display: flex;
    flex-wrap: wrap;
  .cate-item {
    width: 33.33%;
    border: 5rpx solid #fff;
    image {

    }
  }
}
}
</style>